<template>
  <el-divider content-position="left">订单收货信息</el-divider>
  <el-descriptions
      :column="1"
      size="large"
  >
    <el-descriptions-item label="收货地区：">{{ CodeToText[addressInfo.province] }} / {{ CodeToText[addressInfo.city] }} / {{ CodeToText[addressInfo.area] }}</el-descriptions-item>
    <el-descriptions-item label="详细地址：">{{ addressInfo.addressDetail }}</el-descriptions-item>
    <el-descriptions-item label="收货号码：">{{ addressInfo.phoneNum }}</el-descriptions-item>
  </el-descriptions>
  <el-divider content-position="left">订单明细信息</el-divider>
  <el-table :data="bookItemList" ref="bookTableRef" style="width: 100%" >
    <el-table-column label="来源农场" width="250">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><location /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.merchantName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="参考图片" width="90">
      <template #default="scope">
        <div style="display: flex; align-items: center" >
          <el-image :src="scope.row.produceImg" fit="cover" style="max-height: 50px">
            <template #error>
              <div class="image-slot">
                <el-icon><picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品名" width="150">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.produceName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品单价" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.producePrice }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品数量" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.produceCounts }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品总价" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.produceTotalPrice }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="订单项状态" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-tag
              :key="stateTag[scope.row.status]"
              :type="stateTag[scope.row.status]"
              class="mx-1"
              effect="light"
              round
          >
            {{ stateCN[scope.row.status] }}
          </el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="订单项选项">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="right">
          <template #default>
            <div>农产品溯源</div>
          </template>
          <template #reference>
            <el-button @click="gotoOrigin(scope.row.produceID)" size="small" type="primary" circle >溯</el-button>
          </template>
        </el-popover>
        <el-popover v-if="scope.row.status === '3'" effect="light" trigger="hover" placement="right">
          <template #default>
            <div>确认收货</div>
          </template>
          <template #reference>
            <el-button @click="receiving(scope.row.produceID)" size="small" type="success" circle >收</el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import request from "@/http/request";
import {getCurrentInstance, toRaw} from "vue";
const {CodeToText} = require("element-china-area-data/dist/app");

export default {
  name: "BookDetails",
  props: {
    bookID: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      bookBasic: {
        addressID: "",
        bookID: "",
        id: "",
        status: "",
        time: "",
        totalCount: "",
        totalPrice: "",
        userID: "",
      },
      bookItemList: [{
        produceCounts: "",
        produceID: "",
        produceImg: "",
        produceName: "",
        producePrice: "",
        produceTotalPrice: "",
        merchantName: "",
      }],
      addressInfo: {
        addressDetail: "",
        area: "",
        city: "",
        collectionDate: "",
        id: "",
        phoneNum: "",
        province: "",
        userID: "",
      },
    }
  },
  methods: {
    getBookDetailsInfo() {
      request({
        url: "/book/getBookInfo",
        method: "post",
        data:{
          bookID: this.bookID,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.bookBasic = toRaw(response.data.bookBasic);
          let bookItemListTemp = toRaw(response.data).bookItemList;
          this.bookItemList = bookItemListTemp.map((item)=>{
            item.produceImg = this.staticResourcesUrl+item.produceImg;
            return item;
          });
          this.addressInfo = toRaw(response.data).addressInfo;
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    gotoOrigin(produceID) {
      this.$router.push({
        name: 'BookOrigin',
        params: {
          produceID: produceID,
        },
      })
    },
    receiving(produceID) {
      request({
        url: "/book/userConfirmBookHarvest",
        method: "post",
        data:{
          bookID: this.bookID,
          produceID: produceID,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.getBookDetailsInfo();
          this.$tipUtil.successTip(response.msg);
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
  },
  setup() {
    const { appContext : { config: { globalProperties } } } = getCurrentInstance();
    const staticResourcesUrl = globalProperties.$staticResourcesUrl;
    const stateCN = ['全部', '待付款', '待发货', '待收货', '已收货'];
    const stateTag = ['danger', 'info', '', 'warning', 'success'];
    return {
      CodeToText,
      staticResourcesUrl,
      stateCN,
      stateTag,
    }
  },
  mounted() {
    this.getBookDetailsInfo();
  }
}
</script>

<style scoped>

</style>